<template>
	<view class="d-swiper">
		<swiper class="swiper" 
		:indicator-dots="indicator" 
		:indicator-color="indiColor" 
		:indicator-active-color="indiActive" 
		:autoplay="autoplay" 
		:interval="interval"
		:circular="circular"
		:vertical="vertical"
		:previous-margin="previousMargin"
		:next-margin="nextMargin"
		@change="change"
		@animationfinish="animate">
			<swiper-item v-for="(item, index) in list" :key="index">
				<view :style="mode=='gap'?'padding:0 '+ gap/2 +'rpx':''" class="swiper-item-container" @click="touch(index)">
					<image :style="current==index?'transform:scale(1)':mode=='gap'?'transform:scale(.95)':''" class="swiper-item" :src="item"></image>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				previousMargin: '0rpx',
				nextMargin: '0rpx',
				current: 0
			};
		},
		props: {
			// 图片列表
			list: {
				type: Array,
				default: []
			},
			// 模式
			mode: {
				type: String,
				default: 'default'
			},
			// 间隙
			gap: {
				type: Number,
				default: 30
			},
			// 指示器
			indicator: {
				type: Boolean,
				default: true
			},
			// 指示器颜色
			indiColor: {
				type: String,
				default: 'rgba(0, 0, 0, .3)'
			},
			// 指示器活动状态颜色
			indiActive: {
				type: String,
				default: '#000'
			},
			// 是否自动切换
			autoplay: {
				type: Boolean,
				default: true
			},
			// 自动切换时长
			interval: {
				type: Number,
				default: 5000
			},
			// 无缝滑动
			circular: {
				type: Boolean,
				default: true
			},
			// 是否为纵向
			vertical: {
				type: Boolean,
				default: false
			}
		},
		mounted() {
			if (this.mode == 'gap') {
				this.previousMargin = this.gap*2 + 'rpx',
				this.nextMargin = this.gap*2 + 'rpx'
			}
		},
		methods: {
			// swiper滑动改变
			change(event) {
				this.$emit('change', event.detail)
			},
			// 动画结束
			animate(event) {
				if (this.mode == 'gap') {
					this.current = event.detail.current
				}
				this.$emit('animate', event.detail)
			},
			// 点击swiper当前项
			touch(index) {
				this.$emit('touch',index)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/scss/config.scss';
	@import '@/static/scss/mixin.scss';

	.d-swiper {
		@include box-w();
		.swiper-item-container{
			@include box(100%, 300rpx);
			&>image{
				@include square();
				transition: all .2s;
			}
		}
	}
</style>
